Konsep Dasar Pengembangan Web Application Menggunakan Framework Angular

Konsep pengembangan web dengan Angular didasarkan pada arsitektur yang terstruktur, modular, dan berbasis komponen. Angular adalah framework yang dikembangkan oleh Google, dibangun di atas TypeScript, dan dirancang khusus untuk membangun single-page applications (SPA) yang kompleks dan berskala besar.

Komponen (Component)

Komponen adalah blok bangunan dasar dari aplikasi Angular. Setiap komponen mengontrol sebagian antarmuka pengguna (UI) dan terdiri dari tiga bagian utama:

• Kelas TypeScript: Berisi logika aplikasi dan data.
• Template HTML: Menentukan tampilan UI yang akan dirender.
• Dekorator @Component(): Menyediakan metadata yang menghubungkan kelas TypeScript dengan templatnya.

Modul (Module)

Secara tradisional, aplikasi Angular diorganisasi ke dalam modul, yang merupakan wadah untuk sekelompok komponen, layanan, dan lain-lain yang terkait. Namun, versi Angular yang lebih baru juga mendukung API mandiri (standalone APIs) yang memungkinkan pembuatan komponen, directive, dan pipe tanpa perlu modul, sehingga menyederhanakan arsitektur.

Injeksi Dependensi (Dependency Injection atau DI)

DI adalah design pattern yang membuat kode Anda lebih modular, dapat digunakan kembali, dan mudah diuji. Dalam Angular, DI digunakan untuk menyediakan layanan (service) atau sumber daya lain yang dibutuhkan oleh komponen.

• Penyedia (Providers): Menginstruksikan injektor Angular cara membuat layanan.
• Injektor (Injectors): Menyuntikkan (inject) layanan yang dibutuhkan ke dalam komponen.

Layanan (Services)

Layanan adalah kelas yang berisi logika bisnis yang tidak terkait langsung dengan tampilan UI. Layanan dapat berisi data, metode untuk manipulasi data, dan berkomunikasi dengan server. Dengan memisahkan logika ini ke dalam layanan, komponen menjadi lebih ringan dan fokus pada tugas-tugas UI mereka. Layanan kemudian disuntikkan ke dalam komponen menggunakan DI.

Template dan Pengikatan Data (Data Binding)

Template HTML di Angular diperkaya dengan sintaks tambahan yang memungkinkan Anda mengikat data dari kelas komponen ke tampilan.

• Interpolasi {{ }}: Menampilkan nilai properti dari komponen di dalam template.
• Pengikatan Properti [ ]: Mengatur nilai properti elemen HTML dengan data dari komponen.
• Pengikatan Peristiwa ( ): Mendengarkan peristiwa dari pengguna (misalnya, klik tombol) dan mengeksekusi metode di komponen.
• Pengikatan Data Dua Arah [( )]: Sinkronisasi data dua arah secara otomatis antara model dan tampilan.

Arahan (Directives)

Arahan adalah kelas yang dapat memodifikasi perilaku atau struktur elemen HTML. Angular memiliki tiga jenis arahan:

• Arahan Komponen (Component Directives): Ini adalah komponen itu sendiri, yang paling umum.
• Arahan Atribut (Attribute Directives): Mengubah tampilan atau perilaku elemen, komponen, atau arahan lain.
• Arahan Terstruktur (Structural Directives): Mengubah tata letak DOM dengan menambah, menghapus, atau memanipulasi elemen. Contohnya adalah *ngIf (@if) dan *ngFor (@for).

Perutean (Routing)

Angular Router memungkinkan Anda membuat single-page application dengan beberapa tampilan (views) yang berbeda. Router memetakan URL ke komponen tertentu dan memungkinkan navigasi di antara mereka tanpa memuat ulang seluruh halaman.

Pustaka Terintegrasi

Angular menyediakan kumpulan pustaka terintegrasi yang mencakup berbagai fitur, seperti:

• HTTP Client: Untuk komunikasi client-server.
• Form Management: Untuk mengelola formulir.
• State Management (dengan NgRx): Untuk mengelola status aplikasi yang kompleks.

Alur Pengembangan Angular secara umum

1. Pembangunan Komponen: Kembangkan setiap fitur UI sebagai komponen terpisah.
2. Pembuatan Layanan: Buat layanan untuk menangani logika bisnis dan interaksi dengan API.
3. Injeksi Dependensi: Gunakan DI untuk menyediakan layanan ke komponen yang membutuhkannya.
4. Perutean: Konfigurasikan router untuk navigasi antar komponen.
5. Pengikatan Data: Gunakan data binding untuk menghubungkan data antara kelas komponen dan templat HTML.
6. Pengujian dan Pembangunan: Gunakan alat pengembang bawaan Angular untuk menguji dan membangun aplikasi untuk produksi.

---

Project Base Guidance

Struktur project aplikasi frontend memiliki beberapa ketentuan:

• Utamakan reusable component, misal buat custom button dan dipakai ditiap halaman yang butuh button
• Pengelompokan kodingan menerapkan konsep feature based, jadi disarankan tiap fitur dikelompokan kedalam suatu folder yang mewakili fitur tersebut
• Untuk component selain fitur utama, kode HTML dan Typescript boleh digabung dalam 1 file jika component tidak besar. Kalau component besar bisa dipecah dalam beberapa subcomponent, dan kode HTML & Typescriptnya boleh tetap digabung dalam 1 file
• Jika component merupakan dari fitur utama, kode HTML dan Typescript harus dipisah dimana untuk generate componentnya bisa pakai Angular CLI:

ng generate component <nama component>

• Untuk routing, menggunakan mekanisme lazy load dimana berguna untuk mengatur agar aplikasi hanya mengambil data/bundle javascript dari fitur yang diakses sehingga dapat membantu mempercepat proses loading aplikasi

---

Documentation

• Learn angular => https://angular.dev/tutorials/learn-angular
• Angular components => https://angular.dev/guide/components
• Angular templates => https://angular.dev/guide/templates
• Angular directive => https://angular.dev/guide/directives
• Angular form validator => https://angular.dev/guide/forms/form-validation
• Angular lazy load => https://angular.dev/reference/migrations/route-lazy-loading
• Angular routing => https://angular.dev/guide/routing
• Angular signals => https://angular.dev/guide/signals
• Angular dependency injection => https://angular.dev/guide/di/dependency-injection
• Angular reactive form => https://angular.dev/guide/forms/reactive-forms
• Angualr route guardian => https://angular.dev/api/router/CanActivate
• Tailwindcss => https://tailwindcss.com/
• DaisyUI => https://daisyui.com/
• Tiptap => https://tiptap.dev/docs/editor/getting-started/overview

---

Project Structure

Src: root project

• App: merupakan folder utama dari project
  • Features: main folder untuk fitur project, didalamnya terdapat subfolder lagi yang mewakili suatu fitur, didalam subfolder terdapat file router dan service untuk subfolder tersebut dan terdapat sub-subfolder yang berisikan struktur utama dari suatu fitur, contoh struktur:
    • Features (folder)
      • Fitur (daftar folder fitur)
        • Pages (folder)
          • router (file)
          • service (file)
          • List Pages (daftar folder page)
  • Layout: folder untuk menampung layout suatu tampilan, misal layout dari aplikasi yang akan dipakai sebagai template atau layout yang mengatur tata letak suatu tampilan
  • Shared: folder untuk menampung component pendukung, seperti:
    • Reusable component => input text, dropdown, button dll
    • Configs => label, error message dll
    • Consts => untuk menampung file constant
    • Directives => untuk menampung service yang digunakan sebagai tambahan tool pengolahan data pada suatu component
    • Entities => untuk menampung object/interface yang merepresentasikan suatu table/data pada backend/database
    • Models => untuk menampung object/interface sebagai tipe data
    • Utils => untuk menampung tools/services yang digunakan dalam membantu mempersingkat proses pengolahan data misal tools untuk translate suatu label, validasi format data dll
    • Validators => untuk menampung service untuk melakukan validasi pada angular form
• Assets: folder yang berfungsi untuk menyimpan seluruh aset pendukung aplikasi, misal font, style, gambar dll
• Environments: folder untuk menyimpan file environment dimana file ini berfungsi untuk menyimpan constant dari konfigurasi aplikasi, misal secret-key, base-url backend dll

File2 ini juga bisa digunakan untuk menyimpan data konfigurasi itu berdasarkan environment dari aplikasi yang dijalankan, misalnya secret key antara environment development dan production mau dibuat berbeda

Structur Capture